<template>
  <div style="width: 100%">
    <!---->
    <el-form ref="userInfo" :model="userInfo" status-icon label-position="left"
             label-width="150px" style="">
      <div style="padding-left: 10px;">
        <p style="font-size: 16px;">
          <span style="font-weight: 700">推广地址：</span>
          <!--<el-alert
            style="margin-bottom: 10px;width: 95%"
            title="复制此链接，邀请您的好友注册"
            type="success"
            :closable="false">
          </el-alert>-->
          <el-input type="text" v-model="message" style="width: 80%" v-if="id"></el-input>
          <el-input type="text" v-model="message2" style="width: 80%" v-else></el-input>
          <el-button
            v-if="id"
            type = "success"
            v-clipboard:copy="message"
            v-clipboard:success="onCopy"
            v-clipboard:error="onError">复制链接
          </el-button>
          <el-button
            v-else
            type = "success"
            v-clipboard:copy="message2"
            v-clipboard:success="onCopy"
            v-clipboard:error="onError">复制链接</el-button>

        </p>
        <div style="display:flex;">
          <p style="padding-right: 30px;margin: 0;font-weight: 700">
            <span>推广二维码：</span>
          </p>
          <div id="qrcode" ref="qrcode"></div>
        </div>

        <div style="padding-top: 30px">
          <div>
            <h2 style="padding-bottom: 20px;font-size: 21px;">推广流程：</h2>
            <div style="text-align: left">
              <h4>1、 网址链接推广</h4>
              <p style="padding-left: 30px">复制推广链接发送给对方，让其登录该链接网站注册账号即可。</p>
              <h4>2、 二维码推广</h4>
              <p style="padding-left: 30px">保存二维码图片发送给对方，让其识别二维码登录网站并注册账号即可。</p>
            </div>
          </div>
        </div>

      </div>
    </el-form>
  </div>
</template>

<script>
import {doGet, doPost} from '@/api'
import QRCode from 'qrcodejs2'
import Pagination from '@/components/Pagination' // Secondary package based on el-pagination

export default {
  name: 'realcheck',
  filters: { },
  components: {
    Pagination
  },
  props: {
    id: {
      type: undefined,
      required: true
    }
  },
  data() {
    return {
      message: undefined,
      message2: undefined,
      tableData: [{
        level: '0',
        perBP: '2.1BP'
      }, {
        level: '1',
        perBP: '0.4BP'
      }, {
        level: '2',
        perBP: '0.2BP'
      }],
      list: [{
        level: '0',
        perBP: '2BP'
      }, {
        level: '1',
        perBP: '0.12BP'
      }, {
        level: '2',
        perBP: '0.08BP'
      }],
      rewardList: [{
        level: '1',
        perBP: {
          Money: '3000万',
          households: '500户',
          rewards: '0.7BP'
        }
      }, {
        level: '2',
        perBP: {
          Money: '1亿',
          households: '1000户',
          rewards: '1.4BP'
        }
      }, {
        level: '3',
        perBP: {
          Money: '2亿',
          households: '2000户',
          rewards: '1.75BP'
        }
      }],
      total1: 0,
      userInfo: {
        userName: undefined,
        mobile: undefined,
        timeLastLogin: undefined,
        lastLoginIP: undefined,
        timeAdd: undefined,
        isChecked: undefined,
        realName: undefined,
        account: undefined,
        bankCode: undefined,
        commTotal: undefined,
        commission: undefined,
        expend1: undefined,
        expend2: undefined,
        expend3: undefined,
        extendCode: undefined,
        serverName: undefined,
        serverName2: undefined
      },
      listLoading: true,
    }
  },
  created() {
    /*this.$nextTick(() => {
      this.qrcode()
    })*/
    this.getList1()
  },
  methods: {
    //生成推广二维码
    qrcode(extendCode) {
      setTimeout(function() {
        const qrcode = new QRCode('qrcode', {
          width: 150,
          height: 150,
          colorDark: "#42BC85",
          colorLight: "#fff",
          text: 'http://www.piaojupingtai.com/admin/index.html#/mobile/login/reugidterUser?extendCode=' + extendCode
        })
      }, 500)
    },
    //获取个人基本信息
    getList1() {
      doPost('personal.html?op=info', {}).then(response => {
        this.userInfo = response.data
        /*if (response.status != 0) {
          localStorage.setItem('extendCode', this.userInfo.extendCode)
        }*/
        /*this.userInfo.serverName = window.location.href.replace(this.$route.path, '')*/
        this.userInfo.serverName = window.location.href.replace('pc/index.html#/profile/password?id=1', '')
        this.message = this.userInfo.serverName + 'pc/index.html#/login/registeredUser?extendCode=' + this.userInfo.extendCode
        this.userInfo.serverName2 = window.location.href.replace('pc/index.html#/profile/password', '')
        this.message2 = this.userInfo.serverName2 + 'pc/index.html#/login/registeredUser?extendCode=' + this.userInfo.extendCode
        this.qrcode(this.userInfo.extendCode)
      }).catch(error => {
        this.$notify.error({
          title: '失败',
          message: error.message
        })
      })
    },
    onCopy(e) {
      this.$message({
        message: '复制成功',
        type: 'success'
      });
    },
    onError(e) {
      this.$message({
        message: '复制失败',
        type: 'error'
      });
    }
  },

}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  .reward {
    margin-top: 20px;
    .reward-div {
      /*padding: 20px;*/
      background-color: #fff;
    }
  }
</style>
